Icons

<span>
  <icon-chevron id="chevron-up" />
</span>
<span>
  <icon-chevron id="chevron-down" />
</span>
<span>
  <icon-chevron id="chevron-left" />
</span>
<span>
  <icon-chevron id="chevron-right" />
</span>

JavaScript:
riot.mount('#chevron-up', {width: "24px", height: "24px", stroke: "#72207A", rotate: 90});
riot.mount('#chevron-down', {width: "24px", height: "24px", stroke: "#72207A", rotate: -90});
riot.mount('#chevron-left', {width: "24px", height: "24px", stroke: "#72207A", rotate: 180});
riot.mount('#chevron-rigth', {width: "24px", height: "24px", stroke: "#72207A", rotate: 0});

<span>
  <icon-cashandbank-failed />
</span>
<span>
  <icon-cashandbank-success />
</span>
<span>
  <icon-cost-failed />
</span>
<span>
  <icon-cost-success />
</span>
<span>
  <icon-result-failed />
</span>
<span>
  <icon-result-success />
</span>
<span>
  <icon-revenue-failed />
</span>
<span>
  <icon-revenue-success />
</span>

JavaScript:
riot.mount("icon-cashandbank-failed", {width: "60px", height: "60px"});
riot.mount("icon-cashandbank-success", {width: "60px", height: "60px"});
riot.mount("icon-cost-failed", {width: "60px", height: "60px"});
riot.mount("icon-cost-success", {width: "60px", height: "60px"});
riot.mount("icon-result-failed", {width: "60px", height: "60px"});
riot.mount("icon-result-success", {width: "60px", height: "60px"});
riot.mount("icon-revenue-failed", {width: "60px", height: "60px"});
riot.mount("icon-revenue-success", {width: "60px", height: "60px"});